<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>类型：</span>
        <select class="select" v-model="typeSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="item in typeOption" :label="item.name" :value="item.code"></option>
        </select>
        <template class="dataChoose">
          <el-date-picker
            format="yyyy-MM-dd"
            ref="date"
            v-model="value1"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions0"
            size="small">
          </el-date-picker>
        </template>
        <div class="middle">
          <el-button type="primary" v-on:click="dataSearch" size="small">确认</el-button>
        </div>
      </div>
    </div>

    <div class="model query">
      <img :src="IMGBASE64.JIESHOOUTONGZHI2X" class="pink">
      <span class="title">接收通知</span>
      <div class="kong"></div>
      <template>
        <el-table :data="tablemsg" style="width: 100%" @cell-click="showDetails">
          <el-table-column prop="id" label="#" align="center"></el-table-column>
          <el-table-column prop="content" label="通知内容" :show-overflow-tooltip='true' align="center"></el-table-column>
          <el-table-column prop="noticeTypeName" label="类型" align="center"></el-table-column>
          <el-table-column prop="sender" label="发布人" align="center"></el-table-column>
          <el-table-column prop="time" label="发布时间" align="center"></el-table-column>
        </el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
      </template>
    </div>

    <div class="details" v-show="isDetails">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="close" class="close" @click="detailsShow()"></el-button>
      <div class="body">
        <span>{{detailsForm.content}}</span>
          <!-- <el-col :span="24">
            <el-form-item label="联系方式">
              <template v-for="item in imgArray">
                <img :src="item">
              </template>
            </el-form-item>
          </el-col> -->
        <div class="detailsPeople">
          <span>{{detailsForm.sender}}</span></br>
          <span>{{detailsForm.time}}</span>
        </div>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isSuccess"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      isSuccess: false,
      isDetails: false,
      teacherData: [],
      gradeSelect: null,
      gradeOption: [],
      subjectSelect: null,
      subjectOption: [],
      value1: null,
      typeSelect: null,
      typeOption: [],
      total: 0,
      page: 1,
      paging: true,
      tablemsg: [],
      detailsForm: {
        content: null,
        noticeTypeName: null,
        time: null
      }
    }
  },
  methods: {
    dataSearch (time) {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'homeSchool/notice/receiveNotices', {page: (this.page), rows: 20, noticeType: this.typeSelect, noticeTime: this.$refs.date.displayValue}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          // console.log(response.data.data)
          this.tablemsg = response.data.data.rows
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    pickerOptions0 (time) {
      return time.getTime() < Date.now() - 8.64e7
    },
    handleCurrentChange (val) {
      this.page = val
      this.getStudentNameData()
    },
    detailsShow () {
      this.isDetails = !this.isDetails
      this.isSuccess = !this.isSuccess
    },
    showDetails (rows, column) {
      if (column.label !== '操作') {
        this.detailsForm.content = rows.content
        this.detailsForm.sender = rows.sender
        this.detailsForm.time = rows.time
        this.isDetails = !this.isDetails
        this.isSuccess = !this.isSuccess
      }
    }
  },
  mounted () {
    this.dataSearch()
    // let _cookie = document.cookie.split(';')
    // let _cookieArray = []
    // _cookie.forEach(v => {
    //   let _d = v.split('=')
    //   _cookieArray.push({
    //     key: _d[0],
    //     value: _d[1]
    //   })
    // })
    // this.$http.post('http://119.23.36.128:8020/yxt-web/notice/type', {}, {'headers': {'yxt-xtoken': _cookieArray[0].value}}).then(function (response) {
    //   if (response.body.code === '000') {
    //     // console.log(response.data.data)
    //     for (var i = 0; i < response.data.data.length; i++) {
    //       this.typeOption.push(response.data.data[i].name)
    //     }
    //   } else {
    //     this.$route.push('/login')
    //   }
    // })
    this.$http.post(this._httpUrl + 'homeSchool/notice/type', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        // console.log(response.data.data)
        this.typeOption = response.data.data
        // this.typeOption = []
        // for (var i = 0; i < response.data.data.length; i++) {
        //   this.typeOption.push(response.data.data[i].name)
        // }
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .retrieval{
    .body{
      span{
        margin-left: 4%;
      }
      span:first-child{
        margin-left: 0;
      }
      .right{
        float: right;
        margin-right: 5%;
      }
    }
    .select{
      width: 10%;
      border: 0;
      border-bottom: 1px solid #D7D7D7;
      margin-right: 5%;
    }
    .middle{
      width: 25%;
      display: inline-block;
      margin-left: 3%;
      &-text{
        width: 58%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
    }
  }
  .el-table
  {
    .cell
     {
       height: 24px;
     }
  }
  .detailsPeople{
    width: 100%;
    text-align: right;
  }

</style>
